<template>
  <!-- 角色列表 -->
  <div>
    <!-- 面包屑开始 -->
    <BreadCrumb level1="权限管理" level2="角色列表"></BreadCrumb>
    <!-- 面包屑结束 -->

    <!-- 角色列表的开始 -->
    <el-card style="margin-top:20px;">
      <!-- 头部 -->
      <div class="addRole">
        <el-button type="primary" @click="addSole">添加角色</el-button>
      </div>
      <!-- 表格的开始 -->
      <div class="table">
        <el-table border :data="roleList">
          <el-table-column align="center" type="expand">
            <!-- 树状图开始 -->
            <template slot-scope="scope">
              <el-row v-for="(item,index) in scope.row.children" :key="index">
                <el-col :span="6" class="tag_left">
                  <el-tag closable @close="deletePower(scope.row.id,item.id)">{{item.authName}}</el-tag>
                  <i class="el-icon-caret-right"></i>
                </el-col>
                <el-col :span="18">
                  <el-row v-for="(item1,index) in item.children" :key="index">
                    <el-col :span="6">
                      <el-tag
                        type="success"
                        closable
                        @close="deletePower(scope.row.id,item1.id)"
                      >{{item1.authName}}</el-tag>
                      <i class="el-icon-caret-right"></i>
                    </el-col>
                    <el-col :span="18">
                      <el-tag
                        type="warning"
                        class="tag3"
                        closable
                        v-for="(item2,index) in item1.children"
                        :key="index"
                        @close="deletePower(scope.row.id,item2.id)"
                      >{{item2.authName}}</el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </template>
            <!-- 树状图结束 -->
          </el-table-column>
          <el-table-column align="center" label="#" type="index" width="50"></el-table-column>
          <el-table-column align="center" label="角色名称" prop="roleName"></el-table-column>
          <el-table-column align="center" label="角色描述" prop="roleDesc"></el-table-column>
          <el-table-column align="center" label="操作" prop="address">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-edit"
                type="primary"
                size="mini"
                @click="updataData(scope.row)"
              >编辑</el-button>
              <el-button
                icon="el-icon-delete"
                type="danger"
                size="mini"
                @click="roleDelete(scope.row.id)"
              >删除</el-button>
              <el-button
                icon="el-icon-share"
                type="warning"
                size="mini"
                @click="allotPower(scope.row)"
              >分配权限</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 表格的结束 -->
    </el-card>

    <!-- 添加角色的遮罩层的出现 -->
    <el-dialog title="添加角色" :visible.sync="addSoleData">
      <el-form ref="addRoleForm" :model="roleInfo" :rules="rules">
        <el-form-item label="角色名称" label-width="100px" prop="roleName">
          <el-input v-model="roleInfo.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" label-width="100px" prop="roleDesc">
          <el-input v-model="roleInfo.roleDesc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addSoleData = false">取 消</el-button>
        <el-button type="primary" @click="roleConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加角色的遮罩层的出现的结束 -->

    <!-- 编辑角色的遮罩层的出现的开始 -->
    <el-dialog title="编辑角色" :visible.sync="updataSoleData">
      <el-form ref="updataRoleForm" :model="roleInfo" :rules="rules">
        <el-form-item label="角色名称" label-width="100px" prop="roleName">
          <el-input v-model="roleInfo.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" label-width="100px" prop="roleDesc">
          <el-input v-model="roleInfo.roleDesc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updataSoleData = false">取 消</el-button>
        <el-button type="primary" @click="updataRoleConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑角色的遮罩层的出现的结束 -->

    <!-- 角色权限的遮罩层的出现的开始 -->
    <el-dialog title="角色权限" :visible.sync="allotPowerData">
      <!-- 选择项 -->
      <el-tree
        :data="powerData"
        ref="treeData"
        show-checkbox
        node-key="id"
        default-expand-all
        :default-checked-keys="checkArr"
        :props="defaultProps"
      ></el-tree>

      <!-- 取消和确认 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="allotPowerData = false">取 消</el-button>
        <el-button type="primary" @click="powerConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 角色权限的遮罩层的出现的结束 -->
  </div>
</template>

<script>
import {
  getUserRoleList,
  getRoleData,
  roleDeleteData,
  getUpdataData,
  roleDeletePower,
  getPowerList,
  roleUpdataPower
} from "@/http/api";
import { getTreeIds } from "../utils/index";
export default {
  data() {
    return {
      roleList: [], //所有的角色的数据
      addSoleData: false, //控制添加角色的显示隐藏
      updataSoleData: false, //控制修改角色的显示隐藏
      allotPowerData: false, //控制角色权限的显示隐藏
      roleInfo: {
        roleName: "",
        roleDescribe: "",
      },
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
      //dfghjkl;
      powerData: [],
      defaultProps: {
        children: "children",
        label: "authName",
      },
      checkArr: [], //保存id
      roleId: "", //角色的id
    };
  },
  created() {
    this.getRoleList();
  },
  methods: {
    //  获取所有的数据
    async getRoleList() {
      const res = await getUserRoleList();
      // console.log(res.result);
      this.roleList = res.result;
    },
    // 点击添加角色的遮罩层的出现
    addSole() {
      this.roleInfo = {};
      this.addSoleData = true;
    },
    // 当点击添加角色的遮罩层的时候的确定的时候
    roleConfirm() {
      this.$refs.addRoleForm.validate(async (valid) => {
        if (valid) {
          const res = await getRoleData(this.roleInfo);
          console.log(res);
          this.getRoleList();
          this.addSoleData = false;
          this.roleInfo = {
            roleName: "",
            roleDescribe: "",
          };
          this.addSoleData = false;
        } else {
          return false;
        }
      });
    },
    // 点击删除的时候
    roleDelete(userId) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await roleDeleteData(userId);
          this.getRoleList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 控制编辑的出现
    updataData(role) {
      console.log(role);
      this.roleInfo = JSON.parse(JSON.stringify(role));
      this.updataSoleData = true;
    },
    // 点击编辑的遮罩层的确定的按钮
    updataRoleConfirm() {
      this.$refs.updataRoleForm.validate(async (valid) => {
        if (valid) {
          // 拿到角色的id
          const roleId = this.roleInfo.id;
          console.log(roleId);
          await getUpdataData(roleId, this.roleInfo);
          // 更新视图
          this.getRoleList();
          this.updataSoleData = false;
        } else {
          return false;
        }
      });
    },
    //删除角色指定权限
    async deletePower(userId, powerId) {
      // console.log(userId)
      // console.log(powerId)
      //将用户id和权限id传入接口
      await roleDeletePower(userId, powerId);
      //更新视图
      this.getRoleList();
    },
    //显示角色权限
    async allotPower(row) {
      this.allotPowerData = true;
      const res = await getPowerList("tree");
      // console.log(res.result);
      this.powerData = res.result;
      this.checkArr = getTreeIds(row);
      // console.log("this.checkArr:::",this.checkArr)
      this.roleId = row.id;
    },
    //确认权限选项
    async powerConfirm() {
      //已全部选中的权限
      const arr1 = this.$refs.treeData.getCheckedKeys();
      //未全部选中的权限
      const arr2 = this.$refs.treeData.getHalfCheckedKeys();
      //检测
      // console.log("arr1", arr1);
      // console.log("arr2", arr2);
      // 扩展运算符
      const keys = [...arr1, ...arr2];
      // 用逗号分割要传的参数
      const idStr = keys.join(",");
      // 调方法
      await roleUpdataPower(this.roleId,{rids:idStr})
      // 刷新
      this.getRoleList();
      // 关闭弹框
      this.allotPowerData = false; 
    },
  },
};
</script>

<style lang="scss" scoped>
.table {
  margin-top: 20px;
}
.tag3 {
  margin: 10px;
}
</style>
